<template>
  <div class="home">
    <!-- 标题 -->
    <div class="header">
      <div class="front_page">
        <span>{{ home_title }}</span>
      </div>
    </div>
    <div class="content">
      <!-- 宫格 -->
      <div class="nav">
        <div class="nav_box" v-for="item in nav" :key="item.id">
          <img :src="item.imgurl" alt="" />
          <p>{{ item.title }}</p>
        </div>
      </div>
      <!-- 通知 -->
      <div class="notify">
        <img :src="tabbarimg" alt="" />
        <p>{{ notifyspan }}</p>
      </div>
      <div class="activity">
        <img src="@/assets/img/首页_slices/广告位.png" alt="" />
      </div>
      <div :style="partition"></div>
    </div>
    <div class="daiban">
      <p class="daip">我的待办</p>
      <div class="message" v-for="item in message" :key="item.id">
        <p class="mes_p">{{ item.mes }}</p>
        <span>{{ item.datas }}</span>
        <a>{{ chongzhi }}</a>
        <img src="@/assets/img/首页_slices/arrow-right(1).png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { mymoto } from '@/api/login'
export default {
  mounted() {
    mymoto().then(() => {})
  },

  data() {
    return {
      //标题
      home_title: '首页',
      //notifyimg
      tabbarimg: require('@/assets/img/首页_slices/通知.png'),
      //notifyspan
      notifyspan:
        '系统通知公告、催款提醒等、3秒系统通知公告、催款提醒等、3秒系统通知公告、催款提醒等',
      //div分隔
      chongzhi: '去充值',
      partition: {
        width: '100%',
        height: ' 0.5333rem',
        backgroundColor: '#f7f8fa'
      },
      nav: [
        {
          id: 1,
          title: '货车ETC',
          imgurl: require('@/assets/img/首页_slices/组 28(1).png')
        },
        {
          id: 2,
          title: '加油服务',
          imgurl: require('@/assets/img/首页_slices/组 28(2).png')
        },
        {
          id: 3,
          title: '其他服务',
          imgurl: require('@/assets/img/首页_slices/组 28(3).png')
        },
        {
          id: 4,
          title: 'ETC充值',
          imgurl: require('@/assets/img/首页_slices/组 28(4).png')
        },
        {
          id: 5,
          title: '账单服务',
          imgurl: require('@/assets/img/首页_slices/组 28(5).png')
        },
        {
          id: 6,
          title: '余额明细',
          imgurl: require('@/assets/img/首页_slices/组 28.png')
        }
      ],
      message: [
        {
          id: 1,
          mes: '通行账单已生成，目前账户余额不足，请及时充值，以免影响车辆通行。',
          datas: '2021-10-11'
        },
        {
          id: 2,
          mes: '渝A1293863欠费超期3天，已加入黑名单，请尽快充值。',
          datas: '2021-10-12'
        },
        {
          id: 3,
          mes: '渝A1293863欠费超期3天，已加入黑名单，请尽快充值。',
          datas: '2021-10-12'
        },
        {
          id: 4,
          mes: '渝A1293863欠费超期3天，已加入黑名单，请尽快充值。',
          datas: '2021-10-12'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
@font-color: #ffffff;
@backcolor: #f7f8fa;
.home {
  width: 100%;
  height:100%;
  .header {
    overflow: hidden;
    width: 100%;
    height: 8.88rem;
    // background-color: aqua;
    background: url('@/assets/img/首页_slices/组 96.png') no-repeat;
    background-size: 100% 11.2267rem;
    background-position: 0 -2.3467rem;
    img {
      width: 100%;
      height: 100%;
    }
    .front_page {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 2.3467rem;
      span {
        font-size: 0.96rem;
        color: @font-color;
      }
    }
  }
  .content {
    width: 100%;
    .nav {
      height: 9.0667rem;
      //   background-color: antiquewhite;
      margin: 0 0.8533rem;
      .nav_box {
        width: 6.096rem;
        height: 4rem;
        // border: 1px solid red;
        display: inline-block;
        margin: 0.2667rem 0;
        font-size: 0.7467rem;
        img {
          width: 2.1333rem;
          height: 2.1333rem;
          position: relative;
          left: 2rem;
          margin-top: 0.5333rem;
        }
        p {
          text-align: center;
        }
      }
      .nav_box:nth-of-type(4) {
        margin-top: 0;
      }
      .nav_box:nth-of-type(5) {
        margin-top: 0;
      }
      .nav_box:nth-of-type(6) {
        margin-top: 0;
      }
    }
  }
  .notify {
    border-radius: 0.2667rem;
    background-color: @backcolor;
    width: 18.2933rem;
    height: 2.4533rem;
    margin: 0 0.8533rem;
    // border: 1px solid red;
    position: relative;
    // 单行文本超出...
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    img {
      position: absolute;
      margin: 0.5867rem 0.5333rem;
      height: 1.3333rem;
      width: 1.8667rem;
    }
    p {
      // 单行文本超出...
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 0.6667rem 2.9333rem;
      font-size: 0.8rem;
      width: 12.32rem;
    }
  }
  .activity {
    width: 18.2933rem;
    height: 4.8rem;
    margin: 0.8rem 0.8533rem;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .daiban {
    padding: 0 0 3.4667rem 0;
    // height: 200px;
    margin: 0 0.8533rem;
    // border: 1px solid red;
    .daip {
      margin: 0.5333rem 0;
      font-size: 0.9067rem;
      line-height: 0.8267rem;
      font-weight: 700;
    }
    .message {
      border-radius: 0.2667rem;
      height: 4.5867rem;
      background-color: @backcolor;
      margin-top: 0.5333rem;
      background-color: @backcolor;
      span {
        font-size: 0.5333rem;
        color: #999999;
        display: inline-block;
        margin: 0.5333rem 0 0.533rem 0.5333rem;
        width: 3.84rem;
        height: 0.88rem;
        line-height: 0.88rem;
      }
      a {
        color: #008be6;
        font-size: 0.64rem;
        margin-left: 10.9333rem;
      }
      img {
        width: 0.2933rem;
        height: 0.5333rem;
        position: relative;
        top: 0.0533rem;
        right: -0.2667rem;
      }
      .mes_p {
        padding: 0.5333rem 0.5333rem 0 0.5333rem;
        font-size: 0.8rem;
      }
    }
    .message:nth-of-type(1) {
      margin-top: 0 !important;
    }
  }
}
</style>
